@use 'scss/variables' as *;

.updateCheck {
  flex-flow: row !important;
}

.btn-settings {
  @include modal-button(standard);

  display: inline;
  margin-top: 0;
  float: none !important;
  padding: 0 20px;
}

.btn-secondary {
  @include modal-button(secondary);

  display: inline;
  margin-top: 0;
  float: none !important;
  padding: 0 20px;
}

.btn-navigation {
  @include modal-button(standard);

  padding: 10px 20px;
  border-radius: 12px !important;
  transition: all 0.2s ease;
  position: relative;

  @include themed {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  .light & {
    background: transparent !important;
    border: none !important;
  }

  .dark & {
    background: transparent !important;
    border: none !important;
  }

  &:hover {
    @include themed {
      background: rgba(0, 0, 0, 0.04) !important;
    }

    .light & {
      background: rgba(0, 0, 0, 0.04) !important;
    }

    .dark & {
      background: rgba(255, 255, 255, 0.06) !important;
    }
  }

  span,
  svg {
    font-size: 1.1em !important;
  }

  svg {
    font-size: 1.2em !important;

    @include themed {
      color: t($color);
    }
  }
}

/* safari fix */
@supports (-webkit-hyphens: none) {
  .btn-navigation {
    display: inline-block !important;
  }
}

.btn-navigation-active {
  @include themed {
    background: rgba(0, 0, 0, 0.06) !important;
    box-shadow: none !important;
  }

  .light & {
    background: rgba(0, 0, 0, 0.06) !important;
    border: none !important;
  }

  .dark & {
    background: rgba(255, 255, 255, 0.1) !important;
    border: none !important;
  }
}

.btn-collection {
  padding: 1px 12px;
  backdrop-filter: blur(16px) saturate(180%);
  background-color: rgb(255 255 255 / 10%);
  border: 1px solid rgb(209 213 219 / 30%);
  color: #fff;
  border-radius: 12px;
  height: 40px;
  font-size: 1rem;
  display: flex;
  align-items: center;
  flex-flow: row;
  justify-content: center;
  gap: 20px;
  transition: 0.5s;
  cursor: pointer;

  &:hover {
    backdrop-filter: blur(16px) saturate(180%);
    background-color: rgb(17 25 40 / 20%);
    border: 1px solid rgb(255 255 255 / 12.5%);
  }

  &:active {
    @include themed {
      background: t($modal-sidebarActive);
      box-shadow: 0 0 0 1px t($color);
    }
  }

  &:focus {
    @include themed {
      background: t($modal-sidebarActive);
      box-shadow: 0 0 0 1px t($color);
    }
  }

  &:disabled {
    @include themed {
      background: t($modal-sidebarActive);
      cursor: not-allowed;
    }
  }
}

a.btn-collection {
  height: 40px;
  text-decoration: none;

  @include themed {
    border-radius: t($borderRadius);
  }
}

.flowReverse {
  flex-flow: row-reverse !important;
}

.btn-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-content: center;
  border-radius: 8px !important;

  @include modal-button(standard);
}
