@import "src/styles/variables";
.simple-calendar{
  &.window-app{
    .window-content{
      button.fsc-control {
        display: block;
        position: relative;
        font-family: var(--font-family) !important;
        font-size: pxToRem(14, true);
        border: var(--btn-border);
        border-image: var(--btn-border-image) !important;
        background-image: var(--btn-bg-image) !important;
        padding: 0.15rem 0.48rem;
        border-radius: 3px;
        line-height: 1rem;
        box-shadow: 1px 1px pxToRem(5) $boxShadowColor;
        z-index: 1;
        cursor: pointer;

        i, span{
          font-size: pxToRem(14, true);
        }

        &.fsc-grey{
          border-color: var(--btn-grey-border-color);
          background-color: var(--btn-grey-bg-color);
          color: var(--btn-grey-color);
          &:hover, &.active, &:focus {
            text-shadow: unset;
            color: var(--btn-grey-color);
            background-color: var(--btn-grey-bg-hover-color);
            border-color: var(--btn-grey-border-color);
            box-shadow: unset !important;
          }
          &:disabled{
            color: var(--btn-grey-disabled-bg-color);
            cursor: not-allowed;
          }
        }
        &.fsc-primary {
          background-color: var(--btn-primary-bg-color);
          border-color: var(--btn-primary-border-color);
          color: var(--btn-primary-color);

          &:hover, &.active, &:focus {
            background-color: var(--btn-primary-bg-hover-color);
            border-color: var(--btn-primary-border-color);
            color: var(--btn-primary-color);
            box-shadow: unset !important;
          }
          &:disabled{
            background-color: var(--btn-primary-disabled-bg-color);
            border-color: var(--btn-primary-disabled-bg-color);
            color: var(--btn-primary-color);
            cursor: not-allowed;
          }
        }
        &.fsc-secondary {
          background-color: var(--btn-secondary-bg-color);
          border-color: var(--btn-secondary-border-color);
          color: var(--btn-secondary-color);

          &:hover, &.active, &:focus {
            background-color: var(--btn-secondary-bg-hover-color);
            border-color: var(--btn-secondary-border-color);
            color: var(--btn-secondary-color);
            box-shadow: unset !important;
          }
          &:disabled{
            background-color: var(--btn-secondary-disabled-bg-color);
            border-color: var(--btn-secondary-disabled-bg-color);
            color: var(--btn-secondary-color);
            cursor: not-allowed;
          }
          svg{
            line, path, circle{
              fill: var(--btn-secondary-color);
              stroke: var(--btn-secondary-color);
            }
          }
        }
        &.fsc-tertiary{
          background-color: var(--btn-tertiary-bg-color);
          border-color: var(--btn-tertiary-border-color);
          color: var(--btn-tertiary-color);

          &:hover, &.active, &:focus {
            background-color: var(--btn-tertiary-bg-hover-color);
            border-color: var(--btn-tertiary-border-color);
            color: var(--btn-tertiary-color);
            box-shadow: unset !important;
          }
          &:disabled{
            background-color: var(--btn-tertiary-disabled-bg-color);
            border-color: var(--btn-tertiary-disabled-bg-color);
            color: var(--btn-tertiary-color);
            cursor: not-allowed;
          }
        }
        &.fsc-delete {
          background-color: var(--btn-delete-bg-color);
          border-color: var(--btn-delete-border-color);
          color: var(--btn-delete-color);

          &:hover, &.active, &:focus {
            background-color: var(--btn-delete-bg-hover-color);
            border-color: var(--btn-delete-border-color);
            color: var(--btn-delete-color);
            box-shadow: unset !important;
          }
          &:disabled{
            background-color: var(--btn-delete-disabled-bg-color);
            border-color: var(--btn-delete-disabled-bg-color);
            color: var(--btn-delete-color);
            cursor: not-allowed;
          }
        }
        &.fsc-save {
          background-color: var(--btn-save-bg-color);
          border-color: var(--btn-save-border-color);
          color: var(--btn-save-color);

          &:hover, &.active, &:focus {
            background-color: var(--btn-save-bg-hover-color);
            border-color: var(--btn-save-border-color);
            color: var(--btn-save-color);
            box-shadow: unset !important;
          }
          &:disabled{
            background-color: var(--btn-save-disabled-bg-color);
            border-color: var(--btn-save-disabled-bg-color);
            color: var(--btn-save-color);
            cursor: not-allowed;
          }
        }
      }
      .fsc-control-group{
        position: relative;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        .fsc-control{
          border-color: var(--btn-grey-bg-hover-color);
          border-left: 0 solid;
          border-radius: 0;
          margin:0;
          flex: 0;
          &.fsc-primary{
            border-right-color: var(--btn-primary-bg-hover-color);
            &:first-of-type{
              border-left-color: var(--btn-primary-border-color);
            }
            &:last-of-type{
              border-right-color: var(--btn-primary-border-color);
            }
          }
          &.fsc-secondary{
            border-right-color: var(--btn-secondary-bg-hover-color);
            &:first-of-type{
              border-left-color: var(--btn-secondary-border-color);
            }
            &:last-of-type{
              border-right-color: var(--btn-secondary-border-color);
            }
          }
          &.fsc-tertiary{
            border-right-color: var(--btn-tertiary-bg-hover-color);
            &:first-of-type{
              border-left-color: var(--btn-tertiary-border-color);
            }
            &:last-of-type{
              border-right-color: var(--btn-tertiary-border-color);
            }
          }
          &.fsc-delete{
            border-right-color: var(--btn-delete-bg-hover-color);
            &:first-of-type{
              border-left-color: var(--btn-delete-border-color);
            }
            &:last-of-type{
              border-right-color: var(--btn-delete-border-color);
            }
          }
          &.fsc-save{
            border-right-color: var(--btn-save-bg-hover-color);
            &:first-of-type{
              border-left-color: var(--btn-save-border-color);
            }
            &:last-of-type{
              border-right-color: var(--btn-save-border-color);
            }
          }
        }
        button:first-of-type{
          border-top-left-radius: 3px;
          border-bottom-left-radius: 3px;
          border-left: 1px solid var(--btn-grey-border-color);
        }
        button:last-of-type{
          border-top-right-radius: 3px;
          border-bottom-right-radius: 3px;
          border-right-color: var(--btn-grey-border-color);
        }

        .fsc-selector{
          &::after{
            font-family: $icon-font-family;
            content: "\f0d7";
            -moz-osx-font-smoothing: grayscale;
            -webkit-font-smoothing: antialiased;
            font-size: pxToRem(12);
            font-weight: 900;
            font-style: normal;
            font-variant: normal;
            text-rendering: auto;
          }
        }
        .fsc-unit-list{
          margin: 0;
          list-style: none;
          position: absolute;
          bottom: 100%;
          overflow: hidden;
          max-height: 0;
          padding: 0;
          border: var(--btn-border);
          border-image: var(--btn-border-image);
          font-size: pxToRem(14);
          li{
            cursor: pointer;
            padding:.15rem $spacer-half;
            border-bottom: 1px solid;

            &:last-child{
              margin-bottom: 0;
              border-bottom-width: 0;
            }
          }
          &.fsc-down{
            bottom: unset;
            top: 100%;
          }
          &.fsc-open{
            visibility: visible;
            max-height: pxToRem(250);
          }
          &.fsc-closed{
            visibility: hidden;
          }

          &.fsc-primary{
            background-color: var(--btn-primary-bg-color);
            border-color: var(--btn-primary-bg-hover-color);
            li{
              border-color: var(--btn-primary-bg-hover-color);
              color: var(--btn-primary-color);
              &.fsc-selected, &:hover{
                background-color: var(--btn-primary-bg-hover-color);
              }
            }
          }
          &.fsc-secondary{
            background-color: var(--btn-secondary-bg-color);
            border-color: var(--btn-secondary-bg-hover-color);
            li{
              border-color: var(--btn-secondary-bg-hover-color);
              color: var(--btn-secondary-color);
              &.fsc-selected, &:hover{
                background-color: var(--btn-secondary-bg-hover-color);
              }
            }
          }
          &.fsc-tertiary{
            background-color: var(--btn-tertiary-bg-color);
            border-color: var(--btn-tertiary-bg-hover-color);
            li{
              border-color: var(--btn-tertiary-bg-hover-color);
              color: var(--btn-tertiary-color);
              &.fsc-selected, &:hover{
                background-color: var(--btn-tertiary-bg-hover-color);
              }
            }
          }
          &.fsc-delete{
            background-color: var(--btn-delete-bg-color);
            border-color: var(--btn-delete-bg-hover-color);
            li{
              border-color: var(--btn-delete-bg-hover-color);
              color: var(--btn-delete-color);
              &.fsc-selected, &:hover{
                background-color: var(--btn-delete-bg-hover-color);
              }
            }
          }
          &.fsc-save{
            background-color: var(--btn-save-bg-color);
            border-color: var(--btn-save-bg-hover-color);
            li{
              border-color: var(--btn-save-bg-hover-color);
              color: var(--btn-save-color);
              &.fsc-selected, &:hover{
                background-color: var(--btn-save-bg-hover-color);
              }
            }
          }
        }
      }
    }
  }
}