@import '../../../../styles';

$inner-padding: var(--medium-padding);
.select-add {
  width: 100%;
  position: relative;

  .top,
  .bottom {
    padding: $inner-padding;
    z-index: 4;
  }

  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;

    position: relative;
    cursor: pointer;

    p,
    input[type='text'] {
      display: inline-block;
      @include sub-title-text();
    }

    img {
      @include square(16px);
      transition: transform $long-animation-time;

      &.upside-down {
        transform: rotate(-180deg);
      }
    }
  }

  .bottom-container {
    width: 100%;
    height: 300px;

    position: absolute;
    overflow-y: hidden;
    pointer-events: none;

    .bottom {
      position: absolute;
      width: 100%;

      pointer-events: all;
      box-sizing: border-box;

      display: flex;
      flex-direction: column;
      align-items: flex-start;

      border-radius: 0 0 var(--border-radius) var(--border-radius);

      padding-top: 0;

      @include inner-spacing($inner-padding);

      transform: translateY(-100%);
      visibility: hidden;

      &.open {
        visibility: visible;
        transform: none;
      }

      transition: transform $long-animation-time;

      p {
        @include sub-title-text();

        display: inline-block;
        text-align: left;

        cursor: pointer;
      }

      .buttons {
        height: 32px;
        @media (max-width: $mobile-width) {
          height: 24px;
        }
        position: relative;
        width: 100%;

        button {
          margin: 0;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translateY(-50%) translateX(-50%);
        }

        .edit {
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
          margin: 0;
          opacity: 0.25;
          cursor: pointer;

          img {
            @include square(16px);
          }

          transition: opacity $short-animation-time;

          &:before {
            content: '';
            display: block;
            position: absolute;
            bottom: calc(-1 * #{$line-height});
            left: 0;
            height: $line-height;
            background-color: $text-color;
            width: 0;
            transition: width $long-animation-time;
          }

          @media (min-width: $mobile-width) {
            &:hover {
              opacity: 0.5;
            }
            &:hover {
              &:before {
                width: 100% !important;
              }
            }
          }

          &.active {
            &:before {
              width: 100% !important;
            }
          }

          &.active {
            opacity: 1;
          }
        }
      }
    }

    .edit {
    }
  }

  .background {
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;

    @include card();

    z-index: 3;

    transition: box-shadow $long-animation-time, height $long-animation-time;

    &.active {
      box-shadow: $shadow;
    }
  }

  &:hover {
    @media (min-width: $mobile-width) {
      .background {
        box-shadow: $shadow;
      }
    }
  }

  &.shadow-border {
    .background.active {
      box-shadow: $shadow-border;
    }
  }

  &.shadow-border:hover {
    .background {
      box-shadow: $shadow-border;
    }
  }
}