@import '../../styles/variables'

.app
  align-items: center
  background-color: $white
  display: flex
  font-size: 16px
  height: 100vh
  justify-content: center
  position: relative

  .toggleButton
    fill: $black
    position: absolute
    right: 15px
    top: 18px
    transform: scale(1.3)

    &.darkMode
      fill: $white

  .removeButtonsWrapper
    left: 15px
    position: absolute
    top: 12px

    .removeButton
      border: 1px solid $brand-red
      border-radius: 15px
      color: $brand-red
      font-family: inherit
      font-size: 12px
      font-weight: bold
      margin-right: 8px
      padding: 0 8px

      &:last-of-type
        border-color: $black
        color: $black

      &.inActive
        opacity: 0.3

  &.darkMode
    background-color: $black

    .removeButtonsWrapper

      .removeButton
        border: 1px solid $bright-brand-red
        border-radius: 15px
        color: $bright-brand-red

        &:last-of-type
          border-color: #cacacaca
          color: #cacacaca
