@use "sass:math";

@import "~src/styles/variables";

:host {
  display: block;
  position: relative;
}

.phone-portrait-app{
  padding: 0 5vw;
}

.wrapper {
  display: flex;
  flex-direction: column;

  & &__header {
    height: 4.5rem;
    background: #FFFFFF;
  }

  & &__content {
    padding: $offshift-gap 5rem;
  }
}


.header {
  display: flex;
  align-items: center;
  padding: 0 5rem;
  gap: $offshift-gap;

  & &__left,
  & &__right {
    width: 16.25rem;
  }

  & &__left {
    height: 1.875rem;

    > img {
      width: auto;
      height: 100%;
      display: block;
    }
  }

  & &__center {
    margin: 0 auto;
    display: flex;
    align-items: center;
    align-self: flex-end;
    gap: $offshift-gap * 2;


    > a {
      position: relative;
      text-decoration: unset;
      color: #1B0D3D;
      text-transform: uppercase;
      font-weight: 600;
      font-size: 0.875rem;
      padding-bottom: 1.25rem;

      &.active:after {
        width: 100%;
      }

      &:after {
        width: 0;
        left: 0;
        bottom: 0;
        position: absolute;
        background: #5800B0;
        height: 0.1875rem;
        content: "";
        transition: .5s ease-in-out;
      }
    }
  }

  & &__right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: math.div($offshift-gap * 3, 2);;
  }

  & &__connect {
  }

  & &__switch {
    position: relative;
    cursor: pointer;

    .light-mode,
    .dark-mode {
      position: absolute;
      top: calc(50% - 0.5625rem);
      font-size: 1rem;
      z-index: 1;
      color: #FFFFFF;
      opacity: 0.3;

      &.is-active {
        opacity: unset;
        color: #5800B0;
      }
    }

    .light-mode {
      left: 0.375rem;
    }

    .dark-mode {
      right: 0.375rem;
    }

    > p-inputSwitch {
      display: inline-flex;
    }
  }
}