@import "bootstrap_overrides";
@import "bootstrap";
@import "font-awesome";
@import "rails_bootstrap_forms";
@import 'trix/dist/trix';
@import "dropzone/dist/dropzone";
@import 'bootstrap-datepicker';

// Global styles
label {
  text-transform: capitalize;
}

// Wordmarks
.suite-wordmark {
  font-weight: normal;
  span:first-child {
    background-color: $red;
    color: white;
    padding: 5px;
    text-transform: uppercase;
  }
  span:last-child {
    color: $body-color;
    margin-left: 5px;
  }
}

.product-wordmark {
  span:last-child {
    font-weight: normal;
    margin-left: 5px;
    padding: 0 2px;
    text-transform: uppercase;
  }

  &.release-me {
    span:last-child {
      background-color: $teal;
      color: $white;
    }
  }

  &.direct-me {
    span:last-child {
      background-color: $green;
      color: $white;
    }
  }

  &.edit-me {
    span:last-child {
      background-color: $blue;
      color: $white;
    }
  }

  &.deliver-me {
    span:last-child {
      background-color: $purple;
      color: $white;
    }
  }

  &.task-me {
    span:last-child {
      background-color: $yellow;
      color: $white;
    }
  }

  &.disabled {
    span:last-child {
      background-color: $gray-500 !important;
      color: $body-color;
    }
  }
}

// Vertically align all direct descendant elements to the middle
.align-all-middle tr td {
  vertical-align: middle !important;
}

// Create horizontal padding on table rows by targeting table cells
@each $name, $value in $spacers {
  .tr-px-#{$name} {
    &, tr {
      th, td {
        &:first-child { 
          padding-left: $value; 
        }
        &:last-child {
          padding-right: $value;
        }
      }
    }
  }
}

// Show the state of a collapse panel using up and down chevron circle icons
.collapse-indicator {
  cursor: pointer;
  font-family: "FontAwesome";

  &:after {
    content: "\f13a";
  }
}
.collapsed .collapse-indicator:after {
  content: "\f139";
}

// Used for the person photo image upload preview
.photo-preview {
  height: 200px;
  width: 200px;
}

// Fix for Trix rich text editor element + Bootstrap
// Allows the text area to scroll as content is added
trix-editor.form-control {
  height: 15rem;
  overflow-y: auto;
}

// Provide some styling for required form fields
.required small:after, label.required:after {
  color: $red;
  content: "Required";
  margin-left: 5px;
  font-size: 0.5rem;
}
html[lang="es"] .required:after {
  content: "Necesario";
}

// Used when a release has been confirmed for a given video
.releasable[data-confirmed="true"]  {
  button {
    border-width: 5px !important;
    opacity: 0.5;
  }
}

// Used when a suggested_match has been confirmed for a given video
.releasable-match[data-confirmed="true"]  {
  button {
    border-width: 5px !important;
  }
}

// Overrode the above style for audio matches
#audio_matches .releasable-match[data-confirmed="true"]  {
  button {
    border-width: 1px !important;
  }
}

// Used when hiding checkmark next to releasable-match
.releasable-match[data-confirmed="false"] [data-ujs-target=match-confirmed-check] {
  display: none;
}

// Used when hiding checkmark next to graphics-match
.graphics-match[data-confirmed="false"] [data-ujs-target=graphics-confirmed-check]  {
  display: none;
}

// Colored borders that correspond to the type of release
.border-appearance_release {
  border-color: rgb(0,255,0) !important;
}
.border-talent_release {
  border-color: rgb(0,0,255) !important;
}

// Used to hide confirmed releases
.hidden-when-confirmed[data-confirmed="true"] {
  display: none;
}

// Markers
.markers-plugin .markers-plugin-markers .standard-marker.bookmark-marker .standard-marker-inner {
  background-color: map-get($theme-colors, 'info');
}
.markers-plugin .markers-plugin-markers .standard-marker.bookmark-marker:hover .standard-marker-inner,
.markers-plugin .markers-plugin-markers .standard-marker.bookmark-marker.hover .standard-marker-inner {
  background-color: map-get($theme-colors, 'info');
  box-shadow: 0 0 0 8px rgba(map-get($theme-colors, 'info'), 0.2);
}
.markers-plugin .markers-plugin-markers .standard-marker.unreleased-appearance-marker .standard-marker-inner {
  background-color: map-get($theme-colors, 'danger');
}
.markers-plugin .markers-plugin-markers .standard-marker.unreleased-appearancebookmark-marker:hover .standard-marker-inner,
.markers-plugin .markers-plugin-markers .standard-marker.unreleased-appearancebookmark-marker.hover .standard-marker-inner {
  background-color: map-get($theme-colors, 'danger');
  box-shadow: 0 0 0 8px rgba(map-get($theme-colors, 'danger'), 0.2);
}
.markers-plugin .markers-plugin-markers .standard-marker.unreleased-warning-marker .standard-marker-inner {
  background-color: map-get($theme-colors, 'warning');
}
.markers-plugin .markers-plugin-markers .standard-marker.unreleased-warning-marker .standard-marker-inner {
  background-color: map-get($theme-colors, 'warning');
}
.markers-plugin .markers-plugin-markers .standard-marker.unreleased-warning-marker:hover .standard-marker-inner,
.markers-plugin .markers-plugin-markers .standard-marker.unreleased-warning-marker.hover .standard-marker-inner {
  background-color: map-get($theme-colors, 'warning');
  box-shadow: 0 0 0 8px rgba(map-get($theme-colors, 'warning'), 0.2);
}

// Uses a dashed border style
.border-dashed {
  border-style: dashed !important;
}

// Increases the width of the border
.border-thick {
  border-width: 2px !important;
}
.border-thicker {
  border-width: 5px !important;
}

// Style as a keyboard shortcut key
.keyboard-key {
  background-color: map-get($grays, "100");
  background-image: linear-gradient($white, map-get($grays, "100"));
  border-radius: 3px;
  border: 1px solid map-get($grays, "500");
  color: $black;
  font-family: $font-family-monospace;
  font-size: $font-size-sm;
  padding: map-get($spacers, 1);
  text-transform: uppercase;
}

// Remove default button styles
.btn-no-style {
  background-color: transparent;
  border: none;
  outline: none;
  padding: 0;
}

// Cursors
.cursor-copy {
  cursor: copy;
}
.cursor-not-allowed {
  cursor: not-allowed;
}

// These borders only appear when an element is hovered
@each $color, $value in $theme-colors {
  .border-hover-#{$color}:hover {
    border-color: $value !important;
  }
}

// Customized tooltip colors
@each $color, $value in $theme-colors {
  .tooltip-#{$color} {
    & > .tooltip-inner {
      background-color: $value;
    }
    &.bs-tooltip-top > .arrow::before {
      border-top-color: $value;
    }
    &.bs-tooltip-right > .arrow::before {
      border-right-color: $value;
    }
    &.bs-tooltip-bottom > .arrow::before {
      border-bottom-color: $value;
    }
    &.bs-tooltip-left > .arrow::before {
      border-left-color: $value;
    }
  }
}

// Fix for custom file input label in an inline form
.form-inline .custom-file-label {
  justify-content: flex-start;
}

// Customized carousel colors
.carousel-bg-black {
  & > .carousel-inner {
    background-color: $black;
  }
}

// Text size
.x-small {
  font-size: 60%;
}

// Fix long name wrapping in file inputs
.custom-file {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.hidden-file-input {
  width: 0px;
  height: 0px;
  overflow: hidden;
}

[data-behavior=fillable-fields] {
  cursor: pointer;
}

[data-behavior=seekable-timecode] {
  cursor: pointer;
}

// Fixes known issue with collapsible elements which don't normally receive click events on iOS
// https://github.com/twbs/bootstrap/issues/16213#issuecomment-88995656
[data-toggle=collapse][data-target] {
  cursor: pointer;
}

// Pins a modal to the right side of the screen on large devices
.modal-right {
  @include media-breakpoint-up(lg) {
    left: 25%;
    right: 0%;
  }
}

// Provides extra padding to main content area when there is a fixed bottom alert
.alert.fixed-bottom + main {
  padding-bottom: $alert-padding-y * 5 !important;
}

// Allows <hr> divider to be used on a dark background
.divider-light {
  border-color: rgba(255, 255, 255, 0.1);
}

// Sets line height to 0
.no-line-height {
  line-height: 0;
}

// Even lighter text color
.text-more-muted {
  color: $gray-500 !important;
}

// A dark version of the pills nav
.nav-pills-dark {
  a {
    color: $gray-500;

    &:hover {
      background-color: $gray-800;
      color: lighten($gray-500, 15%);
    }

    &.active {
      font-weight: $font-weight-bold;
    }
  }
}

// A comma separated list
ul.list-comma-separated {
  li:not(:last-child):after {
    content: ",";
  }
}

a[data-behavior=seekable-timecode] {
  text-decoration: underline;

  &:hover {
    text-decoration: underline;
  }
}

.embeded-contract-preview {
  display: block;
  margin: 0 auto;
  padding-top: 30px;
}

// Border radius
.rounded-pill-left {
  border-top-left-radius: $rounded-pill;
  border-bottom-left-radius: $rounded-pill;
}
.rounded-pill-right {
  border-top-right-radius: $rounded-pill;
  border-bottom-right-radius: $rounded-pill;
}

// A nav-pills component that uses white color for the active element
.nav-pills-white {
  .nav-link.active,
  .show > .nav-link {
    color: $body-color;
    background-color: $white;
  }
}

// A custom background color that is semi-transparent
.bg-semi-transparent {
  background-color: rgba($black, 0.05);
}

// Black background
.bg-black {
  background-color: $black;
}

// White background
.bg-white {
  background-color: $white;
}

// Custom width
.w-65 {
  width: 65% !important;
}

// Maximum height
.mh-30 {
  max-height: 30rem;
}

// Max-width 75%
.max-w-75 {
  max-width: 75%;
}

// Fix height and width
.fix-h-and-w {
  width: 308px;
  height:308px;
}

// Dropdown shown state overrride
.override-dropdown-show-state {
  color: $white !important;
  background-color: $black !important;
  border-color: transparent !important;
}

// Override custom switch color
.override-custom-control-label::before {
  background-color: #000000;
}

// Override nav tab design
.override-nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
  background: transparent;
  border-color: transparent;
  border-bottom: 3px solid #ff0000;
}

//Trix underline style
trix-toolbar {
  .trix-button--icon-underline::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M12 17c3.31 0 6-2.69 6-6V3h-2.5v8c0 1.93-1.57 3.5-3.5 3.5S8.5 12.93 8.5 11V3H6v8c0 3.31 2.69 6 6 6zm-7 2v2h14v-2H5z'/%3E%3C/svg%3E");
  }
}

// Play button SVG
.play-btn {
  width: 60%;
  height: auto;
}

.play-btn-svg{
  transition: 0.3s;
  stroke:#fedfc2;
  opacity: 0;
}

.play-btn:hover .play-btn-svg {
  fill-opacity: 0;
  opacity: 1;
}

// Play button in video thumbnail preview
.play-thumbnail { position: relative; }
.play-thumbnail img { display: block; }
.play-thumbnail .play-btn { position: absolute; bottom:5px; left:10px; }

// Active recording highlight
.playing-highlight {
  background-color: scale-color($primary, $lightness: 80%);
}

// Toast min width and border radius
.toast-min-w-border-radius {
  min-width: 18rem; 
  border-radius: 0.8rem;
}

// Toast left border primary
.toast-border-left-primary {
  border-left: 8px solid $primary;
}

// Toast left border danger
.toast-border-left-danger {
  border-left: 8px solid $danger;
}

// Change link color to primary on toast notifications
.toast {
  a {
    color: $primary;
  }

  a.btn {
    color: white;
  }
}