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

@mixin accordionAccent($accent) {
  .accordion-labels-contents {
    .label.active {
      background-color: $accent;
      color: setTextColor($accent);
    }
    .label:not(.active):hover {
      background-color: $accent;
      color: setTextColor($accent);
    }
  }
}

@mixin cardAccent($accent) {
  a .title {
    &:hover {
      color: $accent;
    }
  }
  h6 {
    color: $accent;
  }
}

@mixin careersAccent($accent) {
  .careers {
    .careers-container {
      .career-card {
        border-left: calculateRem(5) solid $accent;
        &:hover {
          .title {
            color: $accent;
          }
        }
      }
    }
  }
}

@mixin complexButtonAccent($accent) {
  .icon-container {
    i {
      color: $accent;
    }
  }
}

@mixin detailedImagesAccent($accent) {
  .detailed_images {
    .images-container {
      .image-container {
        svg {
          .shape-group {
            .circle-group {
              .medium-circle {
                fill: $accent;
              }
            }
          }
        }
      }
    }
    .details-container {
      .circle-controls {
        .circle {
          &.active {
            background-color: $accent;
          }
        }
      }
    }
  }
}

@mixin directoryAccent($accent) {
  .directory {
    .first-card {
      background-color: $accent;
      color: setTextColor($accent);
    }
    .content {
      .table-container {
        table {
          thead {
            @if ($accent == $light) {
              border-bottom-color: $mid-gray;
            }
            @elseif ($accent == $dark) {
              border-bottom-color: $dark;
            }
            @else {
              border-bottom-color: $accent;
            }
          }
          tbody {
            tr {
              &:hover {
                background-color: $accent;
                color: setTextColor($accent);
              }
            }
          }
        }
      }
    }
    .person-card {
      &:hover {
        border-color: $accent;

        .person {
          .title {
            h5 {
              color: if($accent == $light or $accent == $dark, $primary-color, $accent);
            }
          }
        }
      }
      .show-additional {
        color: $accent;
      }
    }
    .person-container {
      .icon-container {
        i {
          &:hover {
            color: if($accent == $light or $accent == $dark, $primary-color, $accent);
          }
        }
      }
      .content {
        .right-side {
          .email {
            color: if($accent == $light or $accent == $dark, $primary-color, $accent);
          }
        }
      }
    }
    .show-more-text {
      color: if($accent == $light or $accent == $dark, $primary-color, $accent);
    }
    .modal-mask {
      .modal-wrapper {
        .modal {
          .person {
            .top {
              .email {
                color: if($accent == $light or $accent == $dark, $primary-color, $accent);
              }
            }
          }
        }
      }
    }
  }
}

@mixin fileLibraryAccent($accent) {
  .folder {
    .folder-name {
      color: $accent;
    }
  }
  a.file-link {
    .file {
      &:hover {
        color: setTextColor($accent);
        background-color: $accent;
      }
    }
  }
}

@mixin heroWithInfoBoxAccent($accent) {
  .hero_with_info_box {
    h1.title {
      span.accent-text {
        color: $accent;
      }
    }
  }
  & + .info-box {
    background-color: $accent;
    color: setTextColor($accent);

    .arrows {
      .arrow {
        color: $accent;
      }
    }
  }
}

@mixin iconFeatureRowAccent($accent) {
  @if ($accent != $light and $accent != $dark) {
    $sameTheme: '';
    @if ($accent == $primary-color) {
      $sameTheme: '.primary-theme';
    }
    @elseif ($accent == $secondary-color) {
      $sameTheme: '.secondary-theme';
    }
    @elseif ($accent == $tertiary-color) {
      $sameTheme: '.tertiary-theme';
    }

    &:not(#{$sameTheme}) {
      a.icon-link {
        &:hover {
          .icon-container {
            i {
              color: setTextColor($accent);
            }
          }
        }
      }
      .icon-container {
        background-color: hsl(hue($accent), saturation($accent), lightness($accent) + 15);
      }
    }
  }

  a.icon-link {
    &:hover {
      .icon-container {
        i {
          color: if($accent == $light or $accent == $dark, setLinkColor($accent), setLinkHoverColor($accent));
        }
      }
    }
  }
  .icon-container {
    background-color: setTextColor($accent);
    i {
      color: $accent;
    }
  }
}

@mixin latestNewsAccent($accent) {
  .latest_news {
    .first-card {
      background-color: $accent;
      color: setTextColor($accent);

      .button {
        @if (setTextColor($accent) == $light) {
          @include applyButtonStyles('ghost');
        }
        @else {
          @include applyButtonStyles('dark-ghost');
        }
      }
      .filter {
        .dropdown {

          li {
            &:hover {
              background-color: setGray($accent);
              color: setTextColor(setGray($accent));
            }
          }
        }
      }
    }
    .icon-container {
      &:hover {
        background-color: $accent;
        color: setTextColor($accent);
      }
    }
    .news-card {
      .card-content {
        .category {
          color: if($accent == $light or $accent == $dark, $primary-color, $accent);
        }
      }
    }
  }
}

@mixin meetTheTeamAccent($accent) {
  .meet_the_team {
    .card {
      &.title-card {
        background-color: $accent;
        color: setTextColor($accent);
        @if ($accent == $light or $accent == $dark) {
          .title-subtitle-paragraph {
            h3.subtitle {
              color: $primary-color;
            }
          }
        }
      }
      &:not(.title-card) {
        .bio {
          background-color: $accent;
          color: setTextColor($accent);
        }
      }
    }
  }
}

@mixin parishLocatorAccent($accent) {
  $lightOrDark: null;
  @if ($accent == $light or $accent == $dark) {
    $lightOrDark: $accent;
    $accent: $primary-color;
  }

  .parish_locator {
    .list-map {
      .search-filter {
        .tabs-container {
          .tab:not(.active) {
            background-color: $accent;
            color: setTextColor($accent);
          }
        }
        .radio-input-container {
          & > div {
            label:after {
              background-color: $accent;
            }
          }
        }
        .reset-filter {
          @if ($accent != $light and $accent != $dark) {
            .reset {
              .reset-map {
                &:hover {
                  color: $accent;
                }
              }
            }
          }
          @else {
            .filter {
              &.open {
                border-color: $primary-color;
                .dropdown-toggle {
                  color: $primary-color;
                }
              }
              &:hover {
                border-color: $primary-color;
                .dropdown-toggle {
                  color: $primary-color;
                }
              }
              .dropdown {
                li {
                  &:hover {
                    background-color: $primary-color;
                    color: setTextColor($primary-color);
                  }
                }
              }
            }
          }
        }
      }
      .parishes-list {
        .parish-info {
          border-bottom-color: if($lightOrDark != null, $lightOrDark, $accent);
          &:not(.active):hover {
            background-color: if($lightOrDark != null, $lightOrDark, $accent);
            color: setTextColor(if($lightOrDark != null, $lightOrDark, $accent));
          }

          &.active {
            background-color: rgba(if($lightOrDark != null, $lightOrDark, $accent), 0.2);
          }

          @if ($lightOrDark != null) {
            .body {
              .website {
                .button {
                  @include applyButtonStyles('dark-ghost');
                }
              }
            }
          }
        }
      }
    }
  }
}

@mixin quoteAccent($accent) {
  .quote {
    .container {
      .top {
        .icon-container {
          i {
            color: $accent;
          }
        }
      }
      .bottom {
        span.dash {
          color: $accent;
        }
      }
    }
  }
}

@mixin reflexiveImageListAccent($accent) {
  .reflexive_image_list {
    .panes-container {
      .pane {
        &.pane-1 {
          .list {
            .list-item {
              &.selected {
                @include breakpoint(mobile) {
                  background-color: transparent;
                }

                @include breakpoint(tablet) {
                  background-color: $accent;
                  color: setTextColor($accent);
                }
              }
            }
          }
        }
      }
    }
  }
}

@mixin reflexiveListAccent($accent) {
  .reflexive_list {
    &.hide-title-and-paragraph {
      .pane-2 {
        .list {
          .list-item {
            .label {
              &:after {
                background-color: $accent;
              }
            }
            &:hover {
              .label {
                .label-icons {
                  h4 {
                    color: $accent;
                  }
                }
              }
            }
            &.active {
              .label {
                .label-icons {
                  h4 {
                    color: $accent;
                  }
                }
              }
            }
          }
        }
      }
    }
    .pane-2 {
      .list {
        .list-item {
          &.active, &:hover {
            background-color: $accent;
            color: setTextColor($accent);
          }
        }
      }

    }
    .pane-3 {
      .content {
        ul {
          li::before {
            color: $accent;
          }
        }
      }
    }
    @include breakpoint(mobileonly) {
      .icon-container {
        color: $accent;
      }
    }
  }
}

@mixin schoolLocatorAccent($accent) {
  $lightOrDark: null;
  @if ($accent == $light or $accent == $dark) {
    $lightOrDark: $accent;
    $accent: $primary-color;
  }
  .school_locator {
    .list-map {
      .search-filter {
        .tabs-container {
          .tab:not(.active) {
            background-color: $accent;
            color: setTextColor($accent);
          }
        }
        .radio-input-container {
          & > div {
            label:after {
              background-color: $accent;
            }
          }
        }
        .reset-filter {
          @if ($accent != $light and $accent != $dark) {
            .reset {
              .reset-map {
                &:hover {
                  color: $accent;
                }
              }
            }
          }
          @else {
            .filter {
              &.open {
                border-color: $primary-color;
                .dropdown-toggle {
                  color: $primary-color;
                }
              }
              &:hover {
                border-color: $primary-color;
                .dropdown-toggle {
                  color: $primary-color;
                }
              }
              .dropdown {
                li {
                  &:hover {
                    background-color: $primary-color;
                    color: setTextColor($primary-color);
                  }
                }
              }
            }
          }
        }
      }
      .schools-list {
        .school-info {
          border-bottom-color: if($lightOrDark != null, $lightOrDark, $accent);
          &:not(.active):hover {
            background-color: if($lightOrDark != null, $lightOrDark, $accent);
            color: setTextColor(if($lightOrDark != null, $lightOrDark, $accent));
          }

          &.active {
            background-color: rgba(if($lightOrDark != null, $lightOrDark, $accent), 0.2);
          }

          @if ($lightOrDark != null) {
            .body {
              .website {
                .button {
                  @include applyButtonStyles('dark-ghost');
                }
              }
            }
          }
        }
      }
    }
  }
}

@mixin upcomingEeEventsAccent($accent) {
  .upcoming_ee_events {
    .first-card {
      background-color: $accent;
      color: setTextColor($accent);

      .button {
        @if (setTextColor($accent) == $light) {
          @include applyButtonStyles('ghost');
        }
        @else {
          @include applyButtonStyles('dark-ghost');
        }
      }
      .filter {
        .dropdown {

          li {
            &:hover {
              background-color: setGray($accent);
              color: setTextColor(setGray($accent));
            }
          }
        }
      }
    }
    .icon-container {
      &:hover {
        background-color: $accent;
        color: setTextColor($accent);
      }
    }
    .event-card {
      .card-content {
        .date {
          color: if($accent == $light or $accent == $dark, $primary-color, $accent);
        }
      }
    }
  }
}

@mixin upcomingEventsAccent($accent) {
  .upcoming_events {
    .events-container {
      .event {
        .left-side {
          .top {
            .date-container {
              background-color: $accent;
              color: setTextColor($accent);
            }
          }
          .content {
            .location {
              color: $accent;
            }
          }
        }
        .right-side {
          .icon-container {
            i:hover {
              color: $accent;
            }
          }
          .header-link {
            &:hover {
              color: if($accent == $light or $accent == $light, $primary-color, $accent);
            }
          }
        }
      }
    }
  }
}

@mixin videoEmbedAccent($accent) {
  .video_embed {
    .top {
      .right {
        .list {
          .next-video {
            &:not(.active):hover {
              .icon-container {
                i {
                  color: $accent;
                }
              }
            }
          }
        }
      }
    }
  }
}

@mixin testimonialSliderAccent($accent) {
  .testimonial_slider {
    .slider-bullets {
      .selected {
        color: $accent;
      }
    }
    .quotes-container {
      .quote {
        .container {
          border-color: $accent;

          .bottom {
            .reference {
              color: $accent;
            }
          }
        }
      }
    }
    .icon-container {
      background-color: rgba($accent, 0.81);
    }
  }
}
