@use 'screen-breakpoints' as sb;

:host {
  display: block;

  .selected {
    position: relative;
    background-color: var(--color-septenary);
    border-radius: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;

    @include sb.bp-600w {
      padding: 0.5rem;
    }

    ec-product-image {
      max-width: 480px;
    }

    .nav-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      padding: 0.5rem;
      border: none;
      border-radius: 50%;
      z-index: 1;
      color: var(--color-tertiary);
      background-color: var(--color-bg);
      transition:
        color 300ms ease,
        background-color 300ms ease;

      &[disabled] {
        color: var(--color-quinary);
      }

      &:not([disabled]):hover {
        background-color: var(--color-quinary);
        color: var(--color-primary);
      }

      &.prev {
        left: 1rem;

        ngx-icon {
          transform: rotate(180deg);
        }
      }

      &.next {
        right: 1rem;
      }
    }
  }

  .images {
    margin-top: 0.5rem;

    button {
      background-color: transparent;
      border: none;
      border-radius: 0.25rem;
      margin-right: 0.5rem;
      padding: 0.25rem;
      border: 1px solid var(--color-senary);
      transition:
        border-color 300ms ease,
        background-color 300ms ease;

      &:not(.highlighted):hover {
        border-color: var(--color-tertiary);
      }

      &.highlighted {
        border-color: var(--color-french-violet);
        background-color: var(--color-septenary);
      }
    }
  }
}
