@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");

.gif-converter-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}

.preview-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 320px;
  background: #000;
  overflow: hidden;

  corner-shape: squircle;
  border-radius: calc(16px * var(--br-mult));
  border: 1px solid #333;

  .preview {
    height: inherit !important;
    width: 100%;
    object-fit: contain;
  }
}
img:not([src]), 
img[src=""] {
    visibility: hidden;
}

.settings {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 0.5rem;

  &.disabled {
    opacity: 0.5;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
  }

  .title {
    position: relative;
    min-width: 12ch;
    margin-top: 4px;
    margin-bottom: -0.325rem;
    font-size: 18px;
    font-variation-settings: 'wght' 600;
    color: #ccc;
    cursor: default;
  }

  .subtitle {
    min-width: 12ch;
    margin-top: 4px;
    margin-bottom: -0.325rem;
    margin-right: -0.1rem;
    font-size: 10px;
    font-variation-settings: 'wght' 400;
    opacity: 0.5;
    cursor: default;
  }

  .tooltip {
    &::after {
      content: attr(data-tooltip);
      position: absolute;
      left: calc(100% + 8px);
      transform-origin: bottom center;
      width: max-content;
      
      font-size: 13px;
      font-variation-settings: 'wght' 400;
      white-space: pre-wrap;
      text-align: left;
      line-height: 125%;

      padding: 7px 10px;
      background: rgba(8, 8, 8, .8) !important;
      box-shadow: 2px 2px 6px -4px #000 !important;
      backdrop-filter: blur(3px);
      outline: solid;
      outline-width: thin;
      outline-color: #333333;
      outline-offset: -1px;
      corner-shape: squircle;
      border-radius: calc(10px * var(--br-mult));

      z-index: 1000;
      pointer-events: none;

      opacity: 0;
      transition: transform 150ms ease, opacity 150ms ease;
    }
    &:hover::after {
      opacity: 1;
    }
  }
}

.input {
  height: 30px;
  max-height: 30px;
  background: #252525;
  border: .1rem solid;
  border-radius: 50vw;
  border-color: transparent;
  font-weight: 200;
  font-size: 17px;
  font-family: Inter, sans-serif;
  text-align: center;
  text-align-last: center;
  color: #ccc;
  transition: border-color 200ms ease;
  &:hover {
    border-color: var(--md-primary-fg-color);
  }
  &:focus-visible {
    border-color: #9152ff;
  }
}

.drop-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.333);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 24px;
  font-family: Inter, sans-serif;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, backdrop-filter 200ms ease;
  z-index: 999;

  &.active {
    backdrop-filter: blur(4px);
    opacity: 1;
  }
}

.uploaded-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.333);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 24px;
  font-family: Inter, sans-serif;
  opacity: 0;
  transition: opacity 200ms ease, backdrop-filter 200ms ease;
  z-index: 999;

  &.active {
    backdrop-filter: blur(4px);
    opacity: 1;
  }

  .popup {
    position: relative;
    width: 50vw;
    align-items: center;
    gap: 1rem; background: #090909;
    padding: 2rem;
    corner-shape: squircle;
    border-radius: calc(16px * var(--br-mult));
    border: 1px solid #333;

    .close {
      position: absolute;
      top: 0.5rem;
      right: 0.5rem;
      font-size: 18px;
      cursor: pointer;
      transition: opacity 200ms ease;

      &:hover {
        opacity: 0.67;
      }
    }

    @media (max-width: 768px) {
      width: 90vw;
    }
  }
}

button {
  flex: 1;
}

.button-row {
  display: flex;
  gap: 0.25rem;
}

@media (display-mode: standalone) {
  header {
    .md-header__inner {
      padding: 0;
    }
    .md-header__button.md-icon[for="__drawer"], .md-header__button.md-logo, .md-tabs {
      display: none;
    }
    .md-header__title {
      justify-content: center;
      text-align: center;
      width: 100%;

      .md-header__topic, .md-ellipsis {
        display: none;
        width: 100%;
      }
      .md-header__topic[data-md-component="header-topic"], .md-ellipsis {
        transform: none !important;
        opacity: 1;
        display: block;
        width: 100%;
        transition: none;
      }
    }
  }

  .md-main__inner.md-grid {
    margin-top: 0.5rem;

    article {
      h1 {
        display: none;
      }
      .description {
        display: none;
      }
      .gif-converter-container {
        margin-top: -1.5rem;
      }
    }
  }

  footer {
    display: none;
  }
}

@media (display-mode: standalone) and (max-width: 768px) {
  .md-main__inner.md-grid {
    margin-top: 1rem;

    article {
      padding-bottom: 1.25rem;
    }
  }
}
@media (max-width: 768px) {
  .settings .tooltip::after {
    left: 0;
    top: 100%;
    margin-top: 4px;
    max-width: calc(100vw - (24px * 2));
  }
}