.#{$ns}CardToggler {

  @mixin flex-layout($direction: row) {
    display: flex;
    flex-flow: $direction nowrap;
    justify-content: space-between;
    align-items: center;
  }

  &-modal {
    @include flex-layout(column);
    width: px2rem(600px);
    padding: var(--ColumnToggler-lineHeight);
    border-radius: var(--ColumnToggler-borderRadius);
    background: var(--ColumnToggler-backgroundColor);
    box-shadow: 0 4px 5px 0 rgba(21, 26, 38, 0.06),
      0 1px 10px 0 rgba(21, 26, 38, 0.05), 0 2px 4px -1px rgba(21, 26, 38, 0.04);

    &-header {
      width: 100%;
      @include flex-layout();

      a,
      span {
        display: inline-block;
      }

      .#{$ns}CardToggler-modal-title {
        opacity: 0.95;
        font-size: var(--fontSizeMd);
        color: var(--ColumnToggler-title-fontColor);
        line-height: var(--ColumnToggler-lineHeight);
        font-weight: bold;
      }
    }

    &-content {
      padding: 0;
      width: 100%;
      min-height: 200px;
      list-style: none;
      margin: px2rem(8px) 0;

      &-table{
        width: 100%;
        border: var(--Table-thead-borderWidth) solid var(--Table-thead-borderColor);

        text-align: center;
        border-collapse: collapse;
        thead{
          tr{
            th{
              background: var(--Table-thead-bg);
              border: var(--Table-thead-borderWidth) solid var(--Table-thead-borderColor);
              height: px2rem(37px);
              font-size: var(--Table-thead-fontSize);
              color: var(--Table-thead-color);
              font-weight: var(--fontWeightNormal);
              white-space: nowrap;
            }
          }
        }

        tbody{
          tr{
            td{
              border: var(--Table-thead-borderWidth) solid var(--Table-thead-borderColor);
              height: px2rem(43px);

              input{
                width: 100%;
                height: 100%;
                border: 0;
                text-align: center;
                outline: none;

                &:hover{
                  border: 1px solid var(--Form-input-onFocused-borderColor);
                }

                &:focus{
                  border: 1px solid var(--Form-input-onFocused-borderColor);
                  box-shadow: var(--Form-input-boxShadow);
                  transition: all var(--animation-duration);
                }
              }
              
              &:nth-child(1){
                width: px2rem(180px);
              }
              &:nth-child(2){
                width: px2rem(70px);
              }
              &:nth-child(3){
                width: px2rem(50px);
              }
              &:nth-child(4){
                color: var(--Table-thead-borderColor);
                span{
                  color: var(--link-color);
                  cursor: pointer;
                }
                span.#{$ns}Default-show{
                  cursor: default;
                  color: rgba(0, 0, 0, .45);
                }
              }
              
            }
          }
        }
      }

    }

    .#{$ns}CardToggler-saveAs{
      min-height: auto;
      margin: 20px 0 40px 0;
      &-label{
        display: flex;
        align-items: center;
        margin-bottom: 2px;
        span{
          color: #ea0d0d;
        }
      }
    }


    &-footer {
      width: 100%;
      @include flex-layout();
      justify-content: center;

      .#{$ns}CardToggler-modeSelect {
        color: var(--ColumnToggler-fontColor);
        font-size: var(--fontSizeSm);

        &.is-actived {
          color: var(--link-color);
        }
      }

      & > div {
        @include flex-layout();

        &:first-child {
          justify-content: flex-start;

          a {
            display: inline-block;
          }
        }

        &:last-child {
          justify-content: flex-end;

          button {
            width: 72px;
          }
        }
      }
    }
  }
}
