@import "./common";

* {
  margin: 0;
  padding: 0;
}
.d-f {
  display: flex;
}
.p-l-10 {
  padding-left: 10px;
}
.m-b-10{
  margin-bottom: 10px;
}

.f-d-c {
  flex-direction: column;
}

.a-i-c {
  align-items: center;
}

.a-i-f-e {
  align-items: flex-end;
}

.j-c-c {
  justify-content: center;
}

.j-c-s-b {
  justify-content: space-between;
}

.j-c-s-a {
  justify-content: space-around;
}

.j-c-f-e {
  justify-content: flex-end;
}

.f-1 {
  flex: 1;
}

.f-1-h {
  @extend .f-1; // stylelint-disable-line

  min-height: 0;
}

.f-1-w {
  @extend .f-1; // stylelint-disable-line

  min-width: 0;
}

.w-100 {
  width: 100%;
}

.h-100 {
  height: 100%;
}

.w-h-100 {
  @extend .w-100; // stylelint-disable-line
  @extend .h-100; // stylelint-disable-line
}

.scroll {
  -webkit-overflow-scrolling: touch;

  &::-webkit-scrollbar,
  &::-webkit-scrollbar-thumb,
  &::-webkit-scrollbar-track {
    border-radius: 5px;
  }

  &::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  &::-webkit-scrollbar,
  &::-webkit-scrollbar-track {
    background-color: $background-darken;
  }

  &::-webkit-scrollbar-thumb {
    background-color: $background;
  }
}

.scroll-y {
  overflow-x: hidden;
  overflow-y: auto;

  @extend .scroll; /* stylelint-disable-line */
}

.scroll-x {
  overflow-x: auto;
  overflow-y: hidden;

  @extend .scroll; /* stylelint-disable-line */
}

.ellipsis-line {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.o-f-c {
  object-fit: cover;
  object-position: center center;
}

html,
body {
  width: 100%;
  height: 100%;
}

.btn-border-transparent {
  border-color: transparent !important;
}

.btn-background-darken {
  background: linear-gradient(180deg, #69696d 0%, #4e4e50 100%) !important;
}

.btn-img {
  width: auto;
  height: 24px;
  margin-right: 4px;
}

.confirm-content-info {
  font-size: 16px;
  line-height: 1.2;
  color: $darkener;
  text-align: center;
  margin: 30px 0 20px;
}

.nav-top {
  height: 60px;
  display: flex;
  align-items: center;
  img {
    margin-right: 8px;
  }
  span {
    font-size: 20px;
    font-weight: bold;
  }
}