@import "../../../scss/variables";

select-plan-period-panel {
  display: block;

  @media only screen and (max-width: $tablet) {
    .subscription-period-step {
      display: block;
    }
    
    upgrade-page-aside {
      display: none;
    }
  }

  .left-col {
    display: flex;
    flex-direction: column;
    max-width: 100%;
  }

  .actions {
    margin-top: auto;
  }

  .title {
    font-size: 2.1rem;
    font-weight: 300;
    margin-bottom: 40px;
  }

  .periods {
    margin-bottom: 40px;

    > .radio-button-wrapper {
      display: flex;
      align-items: center;
      margin-bottom: 35px;

      &.no-label {
        padding-left: 90px;

        @media only screen and (max-width: $tablet) {
          padding-left: 0;
        }
      }

      > .savings-label {
        width: 90px;
        height: 28px;
        line-height: 28px;
        padding-left: 22px;
        font-size: 1.2rem;
        font-weight: 500;
        text-transform: uppercase;
        background-color: $site-primary-color-100;
        color: $site-text-color-100;
        position: relative;

        @media only screen and (max-width: $tablet) {
          display: none;
        }

        &:after {
          content: " ";
          left: 100%;
          top: 50%;
          height: 0;
          width: 0;
          border: 14px solid transparent;
          border-left-color: $site-primary-color-100;
          position: absolute;
          pointer-events: none;
          margin-top: -14px;
        }

        &:before {
          content: " ";
          left: 0;
          top: 50%;
          height: 0;
          width: 0;
          border: 14px solid transparent;
          border-left-color: $site-bg-color-100;
          position: absolute;
          pointer-events: none;
          margin-top: -14px;
        }
      }

      > .period {
        display: block;
        margin-left: 30px;

        @media only screen and (max-width: $tablet) {
          margin-left: 0;
        }

        .mat-radio-label-content {
          display: flex;
          font-size: 1.5rem;

          > .name {
            font-weight: 500;
            padding-right: 5px;
          }
        }
      }
    }
  }
}