@import "download-progress.scss";
@import "css-tooltip.scss"; // https://npm.im/css-tooltip

:root {
  --ytdl-rich-options-y-axis: 36px;
}

.ytdl-action-buttons {
  display: flex;

  &__button {
    display: flex;
    align-items: center;
    gap: 5px;
    background-color: transparent;
    border: none;
    font-size: var(--ytd-tab-system_-_font-size, 1.4rem);
    cursor: pointer;
    color: var(
      --yt-button-icon-button-text-color,
      var(--yt-spec-text-secondary, #030303)
    );

    &:disabled {
      filter: opacity(0.3);
    }
  }

  svg {
    fill: var(--yt-button-icon-button-text-color);
  }
}

.ytdl-container {
  display: flex;
  position: relative;

  &__checkbox {
    width: 0;
    transition: width 0.25s;
  }

  &__rich-options-wrapper {
    font-size: 1.5rem;
    color: var(--yt-spec-text-primary);
    background-color: var(--yt-spec-general-background-a);
    width: 300px;
    cursor: default;
    display: flex;
    justify-content: center;

    &--floating {
      box-shadow: var(--shadow-elevation-16dp_-_box-shadow);
      z-index: 1;
      position: absolute;
      top: var(--ytdl-rich-options-y-axis);

      &-up {
        --ytdl-rich-options-y-axis: -279px;
      }
    }

    &--in-place {
      border: 1px solid var(--yt-spec-text-secondary);
    }

    &--playlist {
      border: 1px solid darkgray;
    }
  }

  &__rich-options {
    width: 80%;

    &__form {
      display: grid;
      grid-template-columns: max-content 1fr;

      .ytdl-container__filename-error {
        grid-column: 1 / -1;
      }

      input[type="text"] {
        // Setting the min-width to 0 as
        // the grid's 1fr will adjust the width instead
        min-width: 0;
      }

      input[type="radio"] {
        margin: 0 8px 0 0;
      }
    }
  }

  &__tabs-buttons {
    display: flex;
    justify-content: center;
    margin: 20px 0;
    gap: 10px;
  }

  &__tab-button {
    color: var(--yt-spec-text-primary);
    background-color: var(--yt-spec-general-background-a);
    border: 1px solid;
    padding: 7px 9px;

    &--selected {
      color: var(--yt-spec-general-background-a);
      background-color: gray;
    }
  }

  &--single-video {
    margin: 0 10px;
    align-items: center;

    .ytdl-action-buttons {
      margin: 0 2px;
    }

    progress {
      position: absolute;
      transform: translate(-135%, 17px);
      left: 50%;

      ~ .ytdl-tooltip__text {
        left: -80px;

        &--bottom {
          transform: translate(-50%, 194%);
        }
      }
    }
  }

  &__playlist {
    display: block;

    .ytdl-action-buttons__button {
      padding: 0;
    }
  }

  &--playlist-single-video {
    flex-direction: column;
    transition: max-width 0.3s, transform 0.3s;
    overflow: hidden;
    transform: translateX(-200px);
    max-width: 0;
    display: flex;

    &__rich-options-wrapper {
      min-height: 239px;
    }

    .ytdl-action-buttons__button {
      transition: background-color 0.3s;

      &:not(:disabled):hover,
      &.ytdl-action-buttons__button--hover {
        background-color: rgba(gray, 0.5);
      }
    }
  }

  &__filename-error {
    color: var(--yt-spec-brand-link-text, red);

    &--supported-extensions {
      color: blue;
    }
  }

  &__filename-option-input {
    width: 100%;
  }

  &__spacer {
    &--margin-top {
      width: 1px;
      height: 10px;
    }
  }

  input[type="text"],
  select {
    color: var(--yt-spec-text-primary);
    border: 0;
    border-bottom: 2px solid var(--yt-spec-10-percent-layer);
    background-color: transparent;
    padding: 2px;
  }

  option {
    background-color: var(--yt-spec-general-background-a);
  }

  input:focus,
  select:focus {
    border-bottom: 2px solid var(--yt-spec-text-primary);
    outline: none;
  }

  input[type="checkbox"] {
    margin: 0 5px 0 0;
  }

  progress {
    width: 100px;
    transition: opacity 0.3s ease;
    opacity: 0;

    &[data-download-type="video+audio"]:not([value="0"]):not([value="1"]),
    &[data-download-type="video+audio"][value="0"]:not([data-progress-type=""]),
    &[data-download-type="video+audio"][value="1"][data-progress-type="video"],
    &[data-download-type="video+audio"][value="1"][data-progress-type="audio"],
    &[data-download-type="video"]:not([value="0"]):not([value="1"]),
    &[data-download-type="audio"]:not([value="0"]):not([value="1"]) {
      opacity: 1;
      cursor: default;
    }
  }
}

html[dark="true"] {
  .ytdl-container {
    &__tab-button {
      color: var(--yt-spec-text-primary);

      &:disabled {
        opacity: 0.5;
      }
    }

    &__filename-error--supported-extensions {
      color: cyan;
    }
  }
}

.ytdl--text-color-default {
  color: var(--yt-spec-text-primary);
}

.ytdl--size-medium {
  font-size: var(--ytd-subheadline-link_-_font-size, 1.6rem);
}

// Transitions for the playlist page - error & X out of Y videos
.slide-short-enter,
.slide-short-leave-to {
  max-height: 0;
}

.slide-short-enter-active,
.slide-short-leave-active {
  transition: max-height 0.3s;
  overflow: hidden;
}

.slide-short-enter-to,
.slide-short-leave {
  max-height: 20px;
}

// Transitions for the playlist page - file extension error
.slide-enter,
.slide-leave-to {
  max-height: 0;
}

.slide-enter-active,
.slide-leave-active {
  transition: max-height 0.3s;
  overflow: hidden;
}

.slide-enter-to,
.slide-leave {
  max-height: 110px;
}

// Transitions for the playlist page - rich options opening
.slide-rich-options-enter,
.slide-rich-options-leave-to {
  max-height: 0;
}

.slide-rich-options-enter-active,
.slide-rich-options-leave-active {
  transition: max-height 0.5s;
  overflow: hidden;
}

.slide-rich-options-enter-to,
.slide-rich-options-leave {
  max-height: 302px;
}

// Transitions for the playlist page - rich options opening for playlists
.slide-rich-options-playlist-enter,
.slide-rich-options-playlist-leave-to {
  max-height: 0;
}

.slide-rich-options-playlist-enter-active,
.slide-rich-options-playlist-leave-active {
  transition: max-height 0.4s;
  overflow: hidden;
}

.slide-rich-options-playlist-enter-to,
.slide-rich-options-playlist-leave {
  max-height: 250px;
}
