@import 'src/css/quasar.variables.scss';

.wrapper--information {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
  width: 348px;
  @media (min-width: $sm) {
    width: 412px;
  }
  @media (min-width: $md) {
    width: 320px;
  }
  @media (min-width: $xl) {
    width: 420px;
  }
}

.container--information {
  border-radius: 6px;
  box-sizing: border-box;
  padding: 16px;
  color: $gray-4;
  background: $gray-1;
  @media (min-width: $md) {
    background: $gray-1;
  }
}

.text--title-feature {
  font-weight: 800;
  font-size: 16px;
  color: $gray-1;
}

.icon-play {
  margin-bottom: -4px;
  color: white;
  transition: all 0.3s ease 0s;
}

.container--how-to-use {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 6px;
  box-sizing: border-box;
  padding: 16px;
  color: $gray-4;
  transition: all 0.4s ease 0s;
  background: $astar-blue;
  @media (min-width: $md) {
    background: $astar-blue;
    &:hover {
      transition: all 0.4s ease 0s;
      background: $astar-blue;
    }
  }
}

.box--contents {
  display: flex;
  flex-direction: column;
  row-gap: 8px;
  color: $navy-1;
  cursor: pointer;
  &:hover {
    .container--explorer-icon {
      transition: all 0.3s ease 0s;
      stroke: $astar-blue;
      opacity: 1;
    }
    .text-topics-link {
      transition: all 0.3s ease 0s;
      color: $astar-blue;
      font-weight: 500;
      cursor: pointer;
    }
  }
  @media (min-width: $md) {
    color: $gray-4;
  }
}

.row--title {
  display: flex;
  align-items: center;
  column-gap: 8px;
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 500;
  color: $navy-1;
  @media (min-width: $md) {
    color: $gray-4;
  }
}

.text-faq-link {
  font-weight: 500;
  transition: all 0.3s ease 0s;
  color: $gray-4;
  &:hover {
    transition: all 0.3s ease 0s;
    color: $astar-blue;
    font-weight: 500;
    cursor: pointer;
  }
}

.text-topics-link {
  font-weight: 500;
  transition: all 0.3s ease 0s;
  color: $gray-4;
}

.box--histories {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
}

.container--hot-topics-contents {
  display: flex;
  justify-content: space-between;
}

.container--explorer-icon {
  stroke: $navy-1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease 0s;
  border-radius: 30px;
  height: 24px;
  svg {
    height: 30px;
    width: 30px;
  }
  @media (min-width: $md) {
    stroke: $gray-4;
    opacity: 0.5;
  }
}

.body--dark {
  .container--information {
    color: $gray-4;
    background: $container-bg-dark !important;
    border: 1px solid transparent;
    @media (min-width: $md) {
      background: $gray-6;
    }
  }
  .container--how-to-use {
    background: $astar-blue;
    @media (min-width: $md) {
      &:hover {
        background: $astar-blue;
      }
    }
  }
  .container--explorer-icon {
    opacity: 1;
  }
  .row--title {
    color: $gray-1;
    @media (min-width: $md) {
      color: $gray-4;
    }
  }
  .box--contents {
    color: $gray-1;
    @media (min-width: $md) {
      color: $gray-4;
    }
  }
  .container--explorer-icon {
    stroke: $gray-1;
    @media (min-width: $md) {
      stroke: $gray-4;
    }
  }
}
