/**
/// Special theme considerations for specific Buildable components.
/// (Methods listed in alphabetical order)
*/

@mixin accordionTheme($theme) {
  .accordion-labels-contents {
    .label {
      background-color: setContrastGray(setTextColor($theme));
    }
  }
}

@mixin cardTheme($theme) {
  a .title {
    color: setTextColor($theme);
  }
  .card {
    background-color: $theme;
  }
}

@mixin careersTheme($theme) {
  @if ($theme == $light or $theme == $dark) {
    background-color: if($theme == $light, $light-gray, $black);
  }

  .careers {
    .careers-container {
      .career-card {
        @if ($theme == $light or $theme == $dark) {
          background-color: if($theme == $light, $light, $dark-gray);
        }
        @else {
          background-color: setContrastGray($theme);
          color: setTextColor(setContrastGray($theme));
        }
      }
    }
  }
}

@mixin detailedImagesTheme($theme) {
  .detailed_images {
    .images-container {
      .image-container {
        svg {
          g.shape-group {
            g.circle-group {
              circle.small-circle {
                fill: setTextColor($theme);
              }
            }

            line {
              stroke: setTextColor($theme);
            }

            g.text-group {
              text {
                fill: setTextColor($theme);
              }
            }
          }
        }
      }
    }
    .details-container {
      @if ($theme == $light) {
        background-color: rgba(0, 0, 0, 0.8);
      }
      @elseif ($theme == $dark) {
        background-color: rgba($dark-gray, 0.95);
      }
      @else {
        background-color: rgba(setLinkHoverColor($theme), 0.8);
      }

      .controls-container {
        @if ($theme == $light) {
          background-color: $light-gray;
        }
        @else if ($theme == $dark) {
          background-color: $quaternary-color;
        }
      }
    }
  }
}

@mixin directoryTheme($theme) {
  .directory {
    @if ($theme == $light) {
      &.table-view {
        @include breakpoint(laptop) {
          box-shadow: 0 12px 32px 0 $shadow-gray;
        }
      }
    }

    & > .content {
      @if ($theme != $light) {
        background-color: setGray($theme);
        color: setTextColor(setGray($theme));
      }

      .table-container {
        table {
          tbody {
            td {
              @if (setGray($theme) == $dark-gray) {
                border-bottom-color: $mid-gray;
              }
              @else {
                border-bottom-color: $light-gray;
              }
            }
          }
        }
      }
      .initial {
        .container {
          .icon {
            i {
              color: if($theme == $light, $light-gray, setTextColor(setContrastGray($theme)));
            }
          }
        }
      }
    }
    .person-card {
      @if ($theme == $light) {
        border: 1px solid $mid-gray;
      }
      @else {
        @if ($theme == $dark) {
          background-color: $dark-gray;
          .image-container {
            i {
              color: $mid-gray;
            }
          }
        }
        @else {
          background-color: setLinkHoverColor($theme);
        }
      }
    }
    @if ($theme != $light) {
      .person-container {
        background-color: setGray($theme);
      }
    }
    .modal-mask {
      @if ($theme == $light) {
        background-color: rgba(0, 0, 0, 0.8);
      }
      @elseif ($theme == $dark) {
        background-color: rgba(255, 255, 255, 0.3);
      }
      @else {
        background-color: rgba(setLinkHoverColor($theme), 0.8);
      }
    }
  }
}

@mixin fileLibraryTheme($theme) {
  a.file-link {
    color: setTextColor($theme);
    .file {
      background-color: setContrastGray(setTextColor($theme));
    }
  }
}

@mixin fixedImageScrollingTheme($theme) {
  .fixed_image_scrolling {
    .mobile-descriptions-images {
      .descriptions-images {
        .description-image {
          &:nth-child(2n) {
            @if ($theme == $light) {
              background-color: $light-gray;
            }
            @else if ($theme == $dark) {
              background-color: $secondary-color;
            }
          }
        }
      }
    }
  }
}

@mixin guillotineImagesTheme($theme) {
  color: setTextColor($theme);
  background-color: $theme;
  .guillotine_images {
    .container {
      .guillotine {
        background-color: $theme;

        .guillotine-left {
          @if ($theme == $light) {
            background-color: $light-gray;
          }

          @else if ($theme == $quaternary-color) {
            background-color: $tertiary-color;
          }
        }

        .guillotine-right {
          background-color: $theme;
        }

        .text-container-1 {
          color: setTextColor($theme);
        }

        .text-container-2 {
          @if ($theme == $light) {
            color: setTextColor($light-gray);
          }
          @else if ($theme == $quaternary-color) {
            color: setTextColor($quaternary-color);
          }
        }
      }
    }
    .mobile-container {
      color: setTextColor($theme);
      background-color: $theme;

      .content {
        &.content-2 {
          @if ($theme == $light) {
            color: setTextColor($light-gray);
            background-color: $light-gray;
          }
          @else if ($theme == $quaternary-color) {
            color: setTextColor($tertiary-color);
            background-color: $tertiary-color;
          }
        }
      }
    }
  }
}

@mixin latestNewsTheme($theme) {
  @if ($theme == $light or $theme == $dark) {
    .latest_news {
      .news-card {
        @if ($theme == $dark) {
          background-color: $dark-gray;
          color: setTextColor($dark-gray);
        }
        .card-content {
          .title-link {
            color: setTextColor($theme);
          }
        }
      }
    }
  }
}

@mixin meetTheTeamTheme($theme) {
  .meet_the_team {
    .members-container {
      .member {
        .icon-link-container {
          .relative-container {
            background-color: if(setTextColor($theme) == $light, $dark, $light-gray);
          }
        }
      }
    }
    & + .member-modal-container {
      .member-modal {
        background-color: setTextColor(setTextColor($theme));
      }
    }
  }
}

@mixin parishLocatorTheme($theme) {
  .list-map {
    .parishes-list {
      background-color: $theme;
    }
  }
}

@mixin percentageInfographicTheme($theme) {
  $lt50bg: null;
  $gt50bg: null;
  $bg: null;

  @if ($theme == $light) {
    $lt50bg: hsl(hue($primary-color), saturation($primary-color), lightness($primary-color) + 15);
    $gt50bg: hsl(hue($primary-color), saturation($primary-color), 75);
    $bg: $primary-color;
  }
  @elseif ($theme == $dark) {
    $lt50bg: hsl(hue($primary-color), saturation($primary-color), lightness($primary-color) + 15);
    $gt50bg: $light;
    $bg: $primary-color;
  }
  @elseif ($theme == $primary-color) {
    $lt50bg: $tertiary-color;
    $gt50bg: $light;
    $bg: $secondary-color;
  }
  @elseif ($theme == $secondary-color or $theme == $tertiary-color) {
    $lt50bg: $quinary-color;
    $gt50bg: $light;
    $bg: $primary-color;
  }

  .percentage-bar-container.less-than-50 {
    background-color: $lt50bg;
    .percentage-bar {
      background-color: $bg;
    }
  }
  .percentage-bar-container.greater-than-equal-50 {
    background-color: $gt50bg;
    .percentage-bar {
      background-color: $bg;
    }
  }
}

@mixin reflexiveListTheme($theme) {
  background-color: transparent;
  &.hide-title-and-paragraph {
    background-color: $theme;
  }
  @include breakpoint(mobileonly) {
    background-color: $theme;
  }

  .reflexive_list {
    background-color: $theme;

    @if ($theme != $dark) {
      .pane.pane-2 {
        .list {
          .list-item {
            border-top-color: setLinkHoverColor($theme);
            &:last-child {
              border-bottom-color: setLinkHoverColor($theme);
            }
          }
        }
      }
    }
  }
}

@mixin schoolLocatorTheme($theme) {
  .list-map {
    .schools-list {
      background-color: $theme;
    }
  }
}

@mixin upcomingEeEventsTheme($theme) {
  @if ($theme == $light or $theme == $dark) {
    .upcoming_ee_events {
      .event-card {
        @if ($theme == $dark) {
          background-color: $dark-gray;
          color: setTextColor($dark-gray);
        }
        .card-content {
          .title-link {
            color: setTextColor($theme);
          }
        }
      }
    }
  }
}
