@use '~styles/global.scss';
@use '~styles/breakpoints.scss' as *;

.postModesHeader {
  margin-bottom: 1.2rem;

  position: relative;
}

.postModesWrapper {
  overflow-x: auto;

  display: flex;

  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;

  &::-webkit-scrollbar {
    display: none;
  }
}

.postModeTitle {
  color: global.$primaryGray;
  font-size: 1.4rem;
  font-weight: 500;

  padding: 0.8rem;

  cursor: pointer;

  &.active {
    color: global.$secondaryPurple;
  }
}

.selectPostMode {
  max-width: max-content;

  display: flex;
  gap: 0.4rem;

  align-items: center;

  color: global.$tertiaryGray;

  &.active {
    [type='checkbox'] {
      border-color: global.$secondaryPurple;
    }
  }
}

.firstGradient,
.lastGradient {
  width: 35px;
  height: 100%;

  position: absolute;
  z-index: 1;

  pointer-events: none;

  content: '';
}

.firstGradient {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0) 100%
  );
}

.lastGradient {
  top: 0;
  right: 0;

  background: linear-gradient(
    270deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0) 100%
  );
}

@include from905 {
  .postModesHeader {
    max-width: 44rem;

    border: 0.1rem solid global.$primaryGray;

    background-color: global.$quaternaryWhite;
    border-radius: 3rem;
  }

  .postModeTitle {
    padding: 1.2rem;
  }

  .selectPostMode {
    border: 0.2rem solid transparent;

    &.active {
      border-color: global.$secondaryPurple;

      background-color: global.$primaryWhite;
      border-radius: 10rem;
    }
  }
}
