.md-outline-button {
 position: relative;
 box-sizing: border-box;
 border-radius: 1.25rem;
 height: 2.5rem;
 padding: 0 1.5rem;
 border: 0.0625rem solid var(--md-sys-color-outline);
 background-color: transparent;
 box-shadow: var(--md-box_shadow_level0);
 font-family: var(--md-sys-typescale-label-large-font);
 font-weight: var(--md-sys-typescale-label-large-weight);
 font-size: var(--md-sys-typescale-label-large-size);
 font-style: var(--md-sys-typescale-label-large-font-style);
 letter-spacing: var(--md-sys-typescale-label-large-tracking);
 text-transform: var(--md-sys-typescale-label-large-text-transform);
 text-decoration: var(--md-sys-typescale-label-large-text-decoration);
 color: var(--md-sys-color-primary);
 white-space: nowrap;
 text-overflow: ellipsis;
 overflow: hidden;
}

/* state layer */
.md-outline-button::after {
 content: "";
 position: absolute;
 z-index: -1;
 top: 0;
 right: 0;
 left: 0;
 bottom: 0;
 background-color: transparent;
}

.md-outline-button:hover {
 color: var(--md-sys-color-primary);
 border-color: var(--md-sys-color-outline);
}

/* state layer */
.md-outline-button:hover::after {
 background-color: var(--md-sys-color-primary);
 opacity: var(--md-sys-state-hover-state-layer-opacity);
}

.md-outline-button:focus {
 outline: none;
 color: var(--md-sys-color-primary);
 border-color: var(--md-sys-color-outline);
}

/* state layer */
.md-outline-button:focus::after {
 background-color: var(--md-sys-color-primary);
 opacity: var(--md-sys-state-focus-state-layer-opacity);
}

.md-outline-button:active {
 color: var(--md-sys-color-primary);
 border-color: var(--md-sys-color-outline);
 background-position: center;
 background-image:
  radial-gradient(circle, var(--md-riple-color) 1%, transparent 1%);
 background-size: 100%;
 animation-name: md-ripple;
 animation-duration: var(--md-sys-motion-duration-500);
 box-shadow: var(--md-box_shadow_level0) !important;
}

/* state layer */
.md-outline-button:active::after {
 background-color: var(--md-sys-color-primary);
 opacity: var(--md-sys-state-pressed-state-layer-opacity);
}

.md-outline-button:disabled {
 background-color: transparent !important;
 border-color: var(--md-sys-color-on-surface) !important;
 color: var(--md-sys-color-on-surface) !important;
 opacity: 0.38 !important;
}

/* container */
.md-outline-button:disabled::after {
 background-color: transparent !important;
 opacity: 1 !important;
}