$session-color-green: #00F782;
$session-color-white: #fff;
$session-color-black: #000;


$session-font-family: Waza;

$session-transition-duration: 0.25s;


$session-icon-size-sm: 16px;
$session-icon-size-md: 20px;
$session-icon-size-lg: 28px;


.content{
    background-color: $session-color-black !important;
}

.session-button {
    min-width: 165px;
    width: auto;
    height: 45px;
    line-height: 45px;
    padding: 0 35px 0 35px;
    font-size: 15px;
    font-family: $session-font-family;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    justify-content: center;
    border-radius: 500px;

    @mixin transparent-background($textAndBorderColor) {
        background-color: Transparent;
        background-repeat:no-repeat;
        overflow: hidden;
        outline:none;
        color: $textAndBorderColor;
        border: 2px solid $textAndBorderColor;
    }
  
    &.full-green {
        background-color: $session-color-green;
        color: $session-color-white;
    }
  
    &.green {
        @include transparent-background($session-color-green);
    }
      
    &.white {
        @include transparent-background($session-color-white);
      }
  }

  
.session-icon-button {
    fill: $session-color-white;
    opacity: 0.4;
    cursor: pointer;
    display: inline-block;
    transition: opacity $session-transition-duration;

    &.small {
        line-height: $session-icon-size-sm;
        height: $session-icon-size-sm;
        width: $session-icon-size-sm;

        margin: $session-icon-size-sm / 3;
        
        img {
            height: $session-icon-size-sm;
            width: $session-icon-size-sm;
        }
    }

    &.medium {
        line-height: $session-icon-size-md;
        height: $session-icon-size-md;
        width: $session-icon-size-md;

        margin: $session-icon-size-md / 3;
        
        img {
            height: $session-icon-size-md;
            width: $session-icon-size-md;
        }
    }
    
    &.large {
        line-height: $session-icon-size-lg;
        height: $session-icon-size-lg;
        width: $session-icon-size-lg;

        margin: $session-icon-size-lg / 3;

        img {
            height: $session-icon-size-lg;
            width: $session-icon-size-lg;
        }
    }

    &:hover{
        opacity: 1;
    }
}